﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>医疗云·移动端预览</title>
    <script type="text/javascript" src="//static.runoob.com/assets/qrcode/qrcode.min.js"></script>
    <script src="jslib/clipboard.min.js"></script>
    <style type="text/css">
        .docs-header-content {
            /*margin: -90px 0px;*/
            /*margin: 10px auto !important;*/
            float: right;
        }

        .phone {
            /*margin: -90px 0px;*/
            /*margin: 10px auto !important;*/
            float: left;
        }

            .phone:before {
                content: '';
                width: 60px;
                height: 10px;
                border-radius: 10px;
                position: absolute;
                left: 50%;
                margin-left: -30px;
                background: #333;
                top: 50px;
            }

            .phone .statusbar {
                position: absolute;
                width: 320px;
                height: 20px;
                background: url('');
                left: 50%;
                margin-left: -160px;
                top: 100px;
                -webkit-background-size: 100% auto;
                background-size: 100% auto;
            }

            .phone:after {
                content: '';
                position: absolute;
                width: 60px;
                height: 60px;
                left: 50%;
                margin-left: -30px;
                bottom: 20px;
                border-radius: 100%;
                box-sizing: border-box;
                border: 5px solid #333;
            }


        .docs-home.mui-ios .phone, .docs-home.mui-android .phone {
            background: #111;
            border-radius: 0px;
            box-shadow: none;
            width: 100%;
            height: 568px;
            padding: 0;
        }

            .docs-home.mui-ios .phone .statusbar, .docs-home.mui-android .phone .statusbar, .docs-home.mui-ios .phone:before, .docs-home.mui-ios .phone:after {
                display: none;
            }

        .phone {
            margin: 0 auto;
            position: relative;
            background: #111;
            border-radius: 55px;
            box-shadow: 0px 0px 0px 2px #aaa;
            width: 320px;
            height: 568px;
            padding: 105px 25px;
            -webkit-box-sizing: content-box;
            box-sizing: content-box;
        }

            .phone iframe {
                width: 320px;
                height: 100%;
                display: block;
                width: 100%;
                margin-top: 20px;
            }
    </style>
</head>
<body>
    <div style="max-width:1024px;margin:0 auto;">
        <div class="docs-header-content" style="top:50px;transform:none;-webkit-transform:none;text-align:left;">
            <p class="docs-subtitle">用手机扫码下面二维码体验</p>
            <div id="qrcode" style="width:200px; height:200px; margin-top:15px;"></div>
            <br />
            <br />
            <p>将地址粘贴到微信公众号，或者直接发给对方！</p>
            <div><input type="text" value="" id="formurl" style="width:400px;" /></div>
            <br />
            <div><button class="btn" type="button" data-clipboard-action="copy" data-clipboard-target="#formurl">复制地址</button></div>
        </div>
        <div class="phone">
            <iframe id="phoneframe" src="" frameborder="0" scrolling="auto" style="background-color:white;"></iframe>
            <div class="statusbar"></div>
        </div>
    </div>


    <script type="text/javascript">
        function getQueryVariable(variable) {
            var query = window.location.search.substring(1);
            var vars = query.split("&");
            for (var i = 0; i < vars.length; i++) {
                var pair = vars[i].split("=");
                if (pair[0] == variable) { return pair[1]; }
            }
            return (false);
        }

        var url = decodeURIComponent(getQueryVariable("url"));

        document.getElementById("phoneframe").src = url;
        document.getElementById("formurl").value = url;

        var qrcode = new QRCode(document.getElementById("qrcode"), {
            width: 200,
            height: 200
        });

        qrcode.makeCode(url);

        //复制问卷地址
        var clipboard = new Clipboard('.btn');

        clipboard.on('success', function (e) {
            console.log(e);
            alert("该地址已经复制，你可以使用Ctrl+V 粘贴。");
        });

        clipboard.on('error', function (e) {
            console.log(e);
        });
    </script>
</body>
</html>
